<template>
  <div class="info-bg">
    <div class="progress-container">
      <div ref="progress"/>
      <div class="credit_limit_info">
        <span>可借额度</span>
        <span>(单位元)</span>
        <span>0</span>
        <span/>
        <span>最高额度因个人资质而定</span>
        <span>额度计算结果</span>
      </div>
      <p class="desc">结合智能数据模型,计算您的贷款额度</p>
    </div>
    <split-title title="补充基本信息" />
    <div ref="container" class="swiper-container">
      <div class="swiper-wrapper">
        <div v-for="item in list" :key="item.id" class="swiper-slide">
          <div class="swiper-slide-item">
            <h3>{{ item.question }}</h3>
            <div class="option-list">
              <span
                v-for="ans in item.options"
                :class="{active:item.answer === ans.id}"
                :key="ans.id"
                @click="chooseItem(item,ans.id)">{{ ans.name }}
              </span>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="swiper-slide-item">
            <div class="question-btn" @click="submit">提交计算</div>
          </div>
        </div>
      </div>
    </div>
    <toast />
    <div class="question-tip">
      <span>已填写信息（{{ answered }}）&nbsp;【{{ index }}/4】</span>
    </div>
  </div>
</template>
<script>
import SplitTitle from '../components/SplitTitle'
import Toast from '../components/Toast'
import Swiper from 'swiper'
import progress from '@/utils/progress'
export default {
  name: 'Info',
  components: {
    SplitTitle,
    Toast
  },
  data() {
    return {
      index: 1,
      list: [
        {
          id: 1,
          question: '您在当前工作单位,已连续缴纳多长时间的社保?',
          answer: '',
          options: [
            { name: '无缴纳社保', id: 1 },
            { name: '1~6个月', id: 2 },
            { name: '6~12个月', id: 3 },
            { name: '12个月以上', id: 4 }
          ]
        },
        {
          id: 2,
          question: '您在当前工作单位,已连续缴纳多长时间的社保?',
          answer: '',
          options: [
            { name: '无缴纳社保', id: 1 },
            { name: '1~6个月', id: 2 },
            { name: '6~12个月', id: 3 },
            { name: '12个月以上', id: 4 }
          ]
        },
        {
          id: 3,
          question: '您每月的打卡工资是多少?',
          answer: '',
          options: [
            { name: '无打卡工资', id: 1 },
            { name: '3000以下', id: 2 },
            { name: '3千~5千元', id: 3 },
            { name: '5千元以上', id: 4 }
          ]
        },
        {
          id: 4,
          question: '您信用卡最高额度是多少?',
          answer: '',
          options: [
            { name: '无信用卡', id: 1 },
            { name: '5千元以上', id: 2 },
            { name: '5千~2万元', id: 3 },
            { name: '2万元以上', id: 4 }
          ]
        }
      ]
    }
  },
  computed: {
    answered() {
      const list = this.list
      let count = 0
      list.forEach(item => {
        if (item.answer) count++
      })
      return count
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initProgress()
      this.initSwiper()
    })
  },
  methods: {
    initProgress() {
      const el = this.$refs.progress
      progress.create({
        dom: el,
        value: 100,
        radius: 110,
        circleWidth: 15,
        text: '',
        pathColors: ['#43e6e2', '#0babed'],
        gradientColor: ['#43e6e2', '#0babed'],
        valAddCalBack: () => []
      })
    },
    initSwiper() {
      const { container, page } = this.$refs
      const vm = this
      this.swiper = new Swiper(container, {
        on: {
          slideChangeTransitionEnd: function() {
            vm.index = Math.min(this.activeIndex + 1, 4)
          }
        }
      })
    },
    chooseItem(item, id) {
      item.answer = id
      if (this.index <= 4) {
        this.swiper && this.swiper.slideNext(2000)
      }
    },
    submit() {
      if (this.answered < 4) {
        this.$toast('请完善基本信息！')
        return
      }
    }
  }
}
</script>
<style lang="less" scoped>
.info-bg{
    .progress-container{
        text-align: center;
        margin: 30px 0;
        position: relative;
        .credit_limit_info{
            position: absolute;
            top: 20px;
            width: 180px;
            height: 180px;
            left: 50%;
            margin-left: -90px;
            border: 6px solid rgba(0,0,0,0.03);
            border-radius: 50%;
            display: flex;
            flex-direction: column;
        }
        .credit_limit_info>span:nth-child(1){
            padding:25px 0 8px 0;
        }
        .credit_limit_info>span:nth-child(1),.credit_limit_info>span:nth-child(6){
            font-size: 14px;
            color: #333333;
        }
        .credit_limit_info>span:nth-child(2),.credit_limit_info>span:nth-child(5){
            font-size: 12px;
            color: #999999;
        }
        .credit_limit_info>span:nth-child(3){
            line-height: 1.5;
            font-size: 27px;
            color: #fe7327;
        }
        .credit_limit_info>span:nth-child(4){
            display: block;
            width: 136px;
            height: 1px;
            background-color: #eeeeee;
            margin:0 0 6px 23px;
        }
        .credit_limit_info>span:nth-child(5){
            padding-bottom: 8px;
        }
        .desc{
            font-size: 14px;
            color: #666666;
        }
    }
    .swiper-slide{
        &-item{
            h3{
                font-size: 14px;
                color: #666666;
                text-align: center;
                margin-bottom: 20px;
            }
            .option-list{
                span{
                    width: 44%;
                    height: 60px;
                    border: 1px solid #eeeeee;
                    border-radius: 5px;
                    font-size: 14px;
                    color: #666666;
                    text-align: center;
                    line-height: 60px;
                    float: left;
                    box-sizing: border-box;
                    margin: 0 0 5% 4%;
                    transition: 0.3s;
                }
                span.active{
                    border: 1px solid #fe7327;
                }
            }
        }
        .question-btn{
            width: 81.16%;
            height: 74px;
            position: relative;
            margin: 0 auto;
            font-size: 18px;
            color: #ffffff;
            font-weight: bold;
            text-align: center;
            line-height: 74px;
            background-image: url(../../../assets/imgs/common_btn.png);
            background-size: 100% 100%;
            margin-top: 40px;
        }
    }
    .question-tip{
        text-align: center;
        font-size: 16px;
        padding: 20px 0;
        span{
            background-color: #fe7327;
            color: white;
            padding: 10px 30px;
            border-radius: 50px;
        }
    }
}
</style>
